<template>
	<!--  移动端首页  -->
	<mu-container style="padding: 0px;">
	  <mu-flex justify-content="start" direction="column" align-items="center">
		  <!--  准备 4个页面进行跳转  -->
		<mu-appbar style="width: 100%;margin: 0px;" >
		  <mu-button icon slot="left" @click="open = !open">
		    <mu-icon value="menu" size="29" ></mu-icon>
		  </mu-button>
		  
		  <img src="../../../imgs/logo.png" style="width: 100px; height: 38px;margin:20px 0px 0px 30px;" />
		 
		</mu-appbar>
		<div class="child">
			<router-view v-on:listenToEvent="onEventFromChild"
					v-bind:parentMsg="position"></router-view>
		</div>
	  </mu-flex>
	  <mu-drawer :open.sync="open" :docked="docked" :right="position === 'right'">
	    <mu-list>
			<mu-list-item  v-for="(item,index) in chekDrawerArr" :key="index"
				button :ripple="false" @click="clickItem(index)">
			     <mu-list-item-action>
			       <mu-checkbox v-model="item.checked" readonly></mu-checkbox>
			      </mu-list-item-action>
			      <mu-list-item-title>
			        {{item.name}}
			      </mu-list-item-title>
			</mu-list-item>
		 
	    </mu-list>
	  </mu-drawer>
	</mu-container>
		
</template>

<script>
export default {
  data () {
    return {
		chekDrawerArr:[
			{checked:true,name:"首页",path:"/index/mobile/homelist"},
			{checked:false,name:"作品",path:"/index/mobile/workerlis"},
			{checked:false,name:"动态",path:"/index/mobile/activity"}, 
			{checked:false,name:"关于我们",path:"/index/mobile/aboutus"},
			],
      docked: false,
      open: false,
      position: 'left'
    }
  },
  methods:{
	  //点击侧边栏事件
	clickItem(index){
		var chekDrawerArr=this.chekDrawerArr;
		if(chekDrawerArr== null) return;
		if(!chekDrawerArr[index].checked){
			for (var i = 0; i < chekDrawerArr.length; i++) {
				chekDrawerArr[i].checked=(i==index);
			}
			console.log("跳转地址:"+chekDrawerArr[index].path)
			if(chekDrawerArr[index].path != null){
				this.$router.push({ path: chekDrawerArr[index].path})
			}
		}else{
			console.log("已经是此页面了:"+index)
		}
		this.open=false;
	},
	onEventFromChild(index){
		var chekDrawerArr=this.chekDrawerArr;
		if(chekDrawerArr== null) return;
		console.log("从子页面来："+index)
		if(!chekDrawerArr[index].checked){
			for (var i = 0; i < chekDrawerArr.length; i++) {
				chekDrawerArr[i].checked=(i==index);
			}
			console.log("跳转地址:"+chekDrawerArr[index].path)
		}else{
			console.log("已经是此页面了:"+index)
		}
		this.open=false;
	}
  }
}
</script>

<style>
	.child{
		width: 100%;
		height: 90%;
	}
	
	.container{
		height: 100%;
	}
	
	.d-flex{
		height: 100%;
	}
</style>
